<template>
  <div class="record">
    <div class="header">
      <div class="left">
        <div class="title">记录详情</div>
      </div>
    </div>
    <div class="container">
      <el-table :data="tableData" border>
        <el-table-column label="测评任务一" align="center">
          <template slot-scope="scope">
            {{ scope.row.oneId ? scope.row.oneScore : "未测评" }}
            <el-button
              v-if="scope.row.oneId"
              @click="detail(scope.row.oneId)"
              type="text"
              size="small"
              >详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="测评任务二" align="center">
          <template slot-scope="scope">
            {{ scope.row.twoId ? scope.row.twoScore : "未测评" }}
            <el-button
              v-if="scope.row.twoId"
              @click="detail(scope.row.twoId)"
              type="text"
              size="small"
              >详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="测评任务三" align="center">
          <template slot-scope="scope">
            {{ scope.row.threeId ? scope.row.threeScore : "未测评" }}
            <el-button
              v-if="scope.row.threeId"
              @click="detail(scope.row.threeId)"
              type="text"
              size="small"
              >详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="sum"
          label="综合得分"
          align="center"
        ></el-table-column>
      </el-table>
      <div class="charts"></div>
    </div>
    <Score v-if="flag" :id="testId" @updateData="updateData" />
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getRecordDetail, scoreRanking } from "@/api/data";
import Score from "../score/index.vue";

export default {
  name: "Visual",
  components: { Score },
  computed: {
    flag() {
      return this.$store.getters.scoreFlag;
    },
  },
  data() {
    return {
      myChart: null,
      tableData: [],
      testId: null,
    };
  },
  methods: {
    updateData() {
      this.getRecordDetailData();
      this.getRanking();
      this.initCharts();
    },
    getRanking() {
      scoreRanking({ parentId: localStorage.getItem("testRecordId") }).then(
        (res) => {
          this.initCharts(res.data);
        }
      );
    },
    getRecordDetailData() {
      this.tableData = [];
      getRecordDetail({ parentId: localStorage.getItem("testRecordId") }).then(
        (res) => {
          this.tableData.push(res.data);
        }
      );
    },
    detail(id) {
      this.testId = id;
      this.$store.state.app.scoreFlag = true;
    },
    initCharts(scoreData) {
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
      }
      const chartDom = document.querySelector(".charts");
      this.myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "得分排名",
          subtext: `你的得分超过了${scoreData && scoreData.score}%的人`,
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          right: "30%",
        },
        series: [
          {
            name: "总分排名",
            type: "pie",
            radius: "50%",
            data: scoreData && scoreData.brokenVoList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && this.myChart.setOption(option);
    },
  },
  mounted() {
    this.getRecordDetailData();
    this.getRanking();
    this.initCharts();
  },
};
</script>
<style lang="scss">
.record {
  padding: 36px 42px;

  .header {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        height: 26px;
        line-height: 26px;
        font-size: 26px;
        color: #333333;
      }
    }
  }

  .container {
    margin-top: 36px;
    width: 100%;
    .el-table {
      font-size: 16px;
    }
    .el-table__body {
      font-size: 20px;
    }
    .charts {
      margin-top: 36px;
      width: 100%;
      height: 400px;
    }
  }
}
</style>
